// JavaScript Document
$.fn.extend({
	tooltip:function(){
		var _direction="down";
		$(this).hover(function(e){
			var _width=parseInt($(this).attr("data-width"));
			//var _height=$(this).attr("data-height");
			var eLeft=$(this).offset().left;
			var eTop=$(this).offset().top;
			var eHeight=$(this).height();
			var eWidth=$(this).outerWidth();
			var box=$("<div class='tooltipBox'></div>");
			var arrow=$("<p style='width:11px; height:6px; position:absolute; '></p>");
			box.css({
				"width":_width-20,
				"height":"auto",
				"position":"absolute",
				"border-radius":"3px",
				"border":"1px solid #3EB8F6",
				"background":"#fff",
				"padding":"10px",
				"z-index":"1000",
			});
			switch(_direction){
				case "down":
					var m=eWidth/2;
					box.css({
						"left":(eLeft-_width/2)+m-6,
						"top":eTop+eHeight+10,
						"border":"1px solid #3EB8F6",
						"background":"#fff"
					});	
					arrow.css({
						"left":"50%",
						"margin-left":"-6px;",
						"top":"-6px",
						"background":"url('images/arrow_top_empty.png') no-repeat"
					});break;
						
			}
			box.append(arrow);
			box.append($(this).attr("data-tooltip"));
			$("body").append(box);
		},function(){
			$(".tooltipBox").fadeOut(100);
			$("body").remove(".tooltipBox");
		})
	}
})
$(document).ready(function(e) {
    $(".tooltip").tooltip()
});